<template>
  <div class="user_wapper">
    <el-row>
      <el-col :span="24">
        <el-card shadow="always">
          <el-row>
            <el-col :span="24">
              <el-button type="primary" @click="onadd">添加</el-button>
              <el-input
                clearable
                @clear="onclear"
                placeholder="请输入内容"
                v-model="Query.query"
                class="input-with-select"
              >
                <el-button slot="append" icon="el-icon-search" @click="users"></el-button>
              </el-input>
            </el-col>
          </el-row>
          <div class="height"></div>
          <el-table :data="tableData" border="" style="width: 100%">
            <el-table-column prop="id" label="用户id" width="100"></el-table-column>
            <el-table-column prop="role_name" label="权限名称"></el-table-column>
            <el-table-column prop="username" label="管理员"></el-table-column>
            <el-table-column prop="mobile" label="手机号"></el-table-column>
            <el-table-column prop="create_time" label="创建时间"></el-table-column>
            <el-table-column prop="mg_state" label="状态">
              <template slot-scope="row">
                <el-switch
                  style="display: block"
                  v-model="row.row.mg_state"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="是"
                  inactive-text="否"
                  @change="onchange(row)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="280">
              <template slot-scope="row">
                <el-button type="primary" size="mini" @click="onedit(row)">修改</el-button>
                <el-button type="danger" @click="ondel(row)" size="mini">删除</el-button>
                <el-button type="warning" @click="onrole(row)" size="mini">分配角色</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="Query.total"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      title="用户编辑"
      :visible="dialogVisible"
      width="50%"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username" :disabled="isedit"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="!isedit">
          <el-input v-model="ruleForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="oncancel" v-no-click>取 消</el-button>
        <el-button type="primary" @click="oneditconfirm" v-no-click v-if="isedit">修改</el-button>
        <el-button type="primary" @click="onconfirm" v-no-click v-else>确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="用户编辑"
      :visible="dialogRole"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="tag_name">当前角色:
        <el-tag>{{roleName}}</el-tag>
      </div>
      <el-select v-model="selectValue" placeholder="请选择">
        <el-option
          v-for="item in selectList"
          :key="item.id"
          :label="item.roleName"
          :value="item.id"
        ></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogRole=false" v-no-click>取 消</el-button>
        <el-button type="primary" @click="onRoleconfirm" v-no-click>确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { isphone } from "@/utils/validate.js";
export default {
  created() {
    this.users();
  },
  mounted() {},
  data() {
    return {
      roleName: "",
      selectValue: "",
      selectList: [],
      isedit: false,
      dialogRole: false,
      Query: {
        query: "",
        pagenum: 1,
        pagesize: 10,
        total: 0
      },
      ruleForm: {
        username: "",
        password: "",
        email: "",
        mobile: "",
        id: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: isphone, trigger: "blur" }
        ]
      },
      dialogVisible: false,
      tableData: []
    };
  },
  // 方法
  methods: {
    users() {
      this.$http
        .users({
          params: this.Query
        })
        .then(res => {
          if (res.meta.status == 200) {
            this.tableData = res.data.users;
            this.Query.total = res.data.total;
          } else {
            this.$message.error(res.meta.msg);
          }
        })
        .catch(res => {
          console.log(res);

          this.$message.error("网络错误");
        });
    },
    onchange(row) {
      this.$http
        .usersState(row.row.id, row.row.mg_state, {})
        .then(res => {
          if (res.meta.status == 200) {
            this.$message.success(res.meta.msg);
            this.users();
          } else {
            this.$message.error(res.meta.msg);
          }
        })
        .catch(res => {
          console.log(res);

          this.$message.error("网络错误");
        });
    },
    // 点击了删除
    ondel(row) {
      this.$confirm("确定删除管理员吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .usersdelete(row.row.id, {})
            .then(res => {
              if (res.meta.status == 200) {
                this.$message.success(res.meta.msg);
                this.users();
              } else {
                this.$message.error(res.meta.msg);
              }
            })
            .catch(res => {
              console.log(res);

              this.$message.error("网络错误");
            });
        })
        .catch(() => {});
    },
    onclear() {
      this.users();
    },
    handleSizeChange(e) {
      this.Query.pagesize = e;
      this.users();
    },
    handleCurrentChange(e) {
      this.Query.pagenum = e;
      this.users();
    },
    onadd() {
      this.dialogVisible = true;
    },
    // 点击了添加用户
    onconfirm() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) return;
        this.$http
          .getusers(this.ruleForm)
          .then(res => {
            if (res.meta.status == 201) {
              this.dialogVisible = false;
              this.users();
            } else {
              this.$message.error(res.meta.msg);
            }
          })
          .catch(res => {
            console.log(res);
            this.$message.error("网络错误");
          });
      });
    },
    oncancel() {
      this.ruleForm.username = "";
      this.ruleForm.password = "";
      this.ruleForm.email = "";
      this.ruleForm.mobile = "";
      this.dialogVisible = false;
         this.isedit = false;
      this.$refs.ruleForm.resetFields();
    },
    onedit(row) {
      this.$http
        .getserchusers(row.row.id)
        .then(res => {
          if (res.meta.status == 200) {
            this.ruleForm.username = res.data.username;
            this.ruleForm.email = res.data.email;
            this.ruleForm.mobile = res.data.mobile;
            this.ruleForm.id = res.data.id;
          } else {
            this.$message.error(res.meta.msg);
          }
        })
        .catch(res => {
          console.log(res);
          this.$message.error("网络错误");
        });
      this.dialogVisible = true;
      this.isedit = true;
    },
    oneditconfirm() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) return;
        this.$http
          .getsubitusers(this.ruleForm.id, this.ruleForm)
          .then(res => {
            if (res.meta.status == 200) {
              this.dialogVisible = false;
              this.isedit = false;
              this.users();
            } else {
              this.$message.error(res.meta.msg);
            }
          })
          .catch(res => {
            console.log(res);
            this.$message.error("网络错误");
          });
      });
    },
    onrole(row) {
      this.$http
        .getrolesList({})
        .then(res => {
          if (res.meta.status == 200) {
            this.roleName = row.row.role_name;
            this.ruleForm.id = row.row.id;
            this.selectList = res.data;
            this.dialogRole = true;
          } else {
            this.$message.error(res.meta.msg);
          }
        })
        .catch(res => {
          console.log(res);
          this.$message.error("网络错误");
        });
    },
    onRoleconfirm() {
      if (!this.selectValue) {
        this.$message.error("请选择角色");
        return;
      }
      this.$http
        .getrole(this.ruleForm.id, {
          rid: this.selectValue
        })
        .then(res => {
          if (res.meta.status == 200) {
            this.selectValue = "";
            this.ruleForm.id = "";
            this.dialogRole = false;
            this.users();
            this.$message.success(res.meta.msg);
          } else {
            this.$message.error(res.meta.msg);
          }
        })
        .catch(res => {
          console.log(res);
          this.$message.error("网络错误");
        });
    }
  },
  //计算属性
  computed: {},
  // 监听属性
  watch: {},
  // 组件注册
  components: {},
  // 组件销毁之前
  beforeDestroy() {}
};
</script>
<style lang="less" scoped>
.user_wapper {
  height: 100%;
  width: 100%;
  .input-with-select {
    width: 25%;
    margin-left: 20px;
  }
  .tag_name {
    padding: 10px;
  }
}
</style>